<template>
  <el-dialog v-model="visible" :title="`${paramsProps.title}`" :destroy-on-close="true" width="580px" draggable>
    <el-form
      ref="ruleFormRef"
      label-width="140px"
      label-suffix=" :"
      :rules="rules"
      :model="paramsProps.row"
      @submit.enter.prevent="handleSubmit"
    >
      <el-form-item label="排班计划名称" prop="title">
        <el-input v-model="paramsProps.row.title" placeholder="请填写排班计划名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="排班类型" prop="scheduleType">
        <el-select v-model="paramsProps.row.scheduleType" clearable placeholder="请选择排班类型">
          <el-option
            v-for="item in optionsStore.getDictOptions('schedule_type')"
            :key="item.id"
            :label="item.codeName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="paramsProps.row.sort" :precision="0" :min="1" :max="999999" />
      </el-form-item>
      <!-- <el-form-item label="上班时间" prop="startTime">
        <el-time-picker clearable v-model="paramsProps.row.startTime" value-format="HH:mm" :default-value="new Date(0, 0, 0, 9, 0, 0)" placeholder="请选择上班时间"></el-time-picker>
      </el-form-item>
      <el-form-item label="下班时间" prop="endTime">
        <el-time-picker clearable v-model="paramsProps.row.endTime" value-format="HH:mm" :default-value="new Date(0, 0, 0, 18, 0, 0)"  placeholder="请选择下班时间"></el-time-picker>
      </el-form-item> -->
      <!-- 根据排班类型动态显示不同数量的排班时间选择项 -->
      <el-form-item v-if="showTimeCount >= 2" label="排班时间" prop="time1">
        <el-time-picker
          clearable
          v-model="paramsProps.row.time1"
          value-format="HH:mm"
          placeholder="请选择排班时间"
        ></el-time-picker>
      </el-form-item>
      <el-form-item v-if="showTimeCount >= 2" label="排班时间2" prop="time2">
        <el-time-picker
          clearable
          v-model="paramsProps.row.time2"
          value-format="HH:mm"
          placeholder="请选择排班时间"
        ></el-time-picker>
      </el-form-item>
      <el-form-item v-if="showTimeCount >= 3" label="排班时间3" prop="time3">
        <el-time-picker
          clearable
          v-model="paramsProps.row.time3"
          value-format="HH:mm"
          placeholder="请选择排班时间"
        ></el-time-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false"> 取消</el-button>
      <el-button type="primary" @click="handleSubmit"> 确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { type ElForm, ElMessage } from 'element-plus';
import { useOptionsStore } from '@/stores/modules/options';

defineOptions({
  name: 'VehicleScheduleForm'
});

const optionsStore = useOptionsStore();

// 根据排班类型确定显示的时间选择项数量
// 这里可以根据实际业务需求调整不同类型对应的时间数量
const showTimeCount = computed(() => {
  const scheduleType = paramsProps.value.row.scheduleType;
  // 定义排班类型与时间数量的映射关系
  const timeCountMap: Record<string, number> = {
    '2001001': 1, // 全班：显示1个时间选择项
    '2001002': 2, // 两班：显示2个时间选择项
    '2001003': 3 // 三班：显示3个时间选择项
  };
  // 如果找不到对应的映射关系，默认显示1个时间选择项
  return timeCountMap[scheduleType] || 1;
});

const rules = reactive({
  title: [{ required: true, message: '请填写排班计划名称' }],
  // sort: [{ required: true, message: '请填写排序' }],
  delFlag: [{ required: true, message: '请填写是否删除' }]
});

const visible = ref(false);
const paramsProps = ref<View.DefaultParams>({
  title: '',
  row: {},
  api: undefined,
  getTableList: undefined
});

// 接收父组件传过来的参数
const acceptParams = (params: View.DefaultParams) => {
  paramsProps.value = params;
  visible.value = true;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<InstanceType<typeof ElForm>>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      await paramsProps.value.api!(paramsProps.value.row);
      ElMessage.success({ message: `${paramsProps.value.title}成功！` });
      paramsProps.value.getTableList!();
      visible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

defineExpose({
  acceptParams
});
</script>

<style scoped lang="scss"></style>
